<template>
	<view class="container">
		<view class="list" v-if="list.length!=0">
			<view class="item" v-for="item in list" :key="item.id" >
				<view class="user" @tap.stop="btn(item.id,item.petsitterNickName)">
					<view class="details">
						<image :src="item.ifAnonymous?item.userAvatar:url+'icon-15.png'" mode=""></image>
						<text class="name xjs-line-one"> {{item.petsitterNickName}}</text>
					</view>
					<view class="time">{{item.createTime.slice(0,10)}}</view>
				</view>
				<view v-if="item.goodsName" class="project" @tap.stop="btn(item.id,item.petsitterNickName)">
					<view>项目：{{item.goodsName}}</view>
					<view class="privacy" v-if="item.openFlag==1">不公开发布</view>
				</view>
				<view class="content" @tap.stop="btn(item.id,item.petsitterNickName)">
					{{item.content}}
				</view>
				<view class="img_list" v-if="item.imgArr">
					<view class="img_list_item" v-for="(i,index) in item.imgArr" :key="i">
						<view class="video" v-if="i.type=='video'">
							<view v-if="i.cover&&!i.show" @tap="i.show=true"><image  :src="i.cover" mode=""></image><image class="bo" :src="url+'icon-147.png'"></image></view>
							<video @ended='i.show=false' :autoplay='!i.show' :src="i.url" v-if="i.show"></video>
						</view>
						<image v-else :src="i.url" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<loadMore v-else :status="'empty'" />
		<image class="submit" v-if="identity==0 || identity==1 || identity==2" :src="url+'icon-98.png'" mode="" @tap.stop="submit"></image>
	</view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import api from '@/api'
import { onShow,onLoad ,onPageScroll} from '@dcloudio/uni-app'
import { useUserStoreToRefs } from '@/store/useUserStore'
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const { userInfo } = useUserStoreToRefs()
onLoad(async (e) => {
	studioId.value = e.studioGoodsId
	userId.value = e.userId?e.userId:''
	
})
onShow(async()=>{
	await getDetails()
	if(userInfo.value){
		await getStudioInfo()
	}
})
const studioId = ref<number>(0)  //工作室id
const userId = ref<string>('')//陪宠师id
const page = ref<number>(1)
const flay = ref<boolean>(true)
const list = ref<listType[]>([])

//获取详情
const getDetails = async() =>{
	const res:any = await api({
		method: 'get',
		url: `/mall/order-service-daily/page`,
		data:{
			page:page.value,
			limit:20,
			studioId:studioId.value,
			userId:userId.value
		}
	})
	if(res&&res.data&&res.data.records){
		list.value = page.value==1? res.data.records:list.value.concat(res.data.records)
		list.value.forEach(item=>{
			let list = [],list1 = []
			if(item.coverPic){
				item.coverPic = item.coverPic.split(',')
				list = settingArr(item.coverPic)
			}
			if(item.videos){
				if(item.videos.indexOf('[')!=-1){
					list1 = settingArr(JSON.parse(item.videos))
				}else{
					list1 = settingArr([{url:item.videos}])
				}
				
			}
			if(list || list1){
				item.imgArr = [...list1,...list]
				item.imgArr = item.imgArr.filter((item,index)=>{return index<4})
			}
		})
		flay.value = list.value.length>=res.data.total?false:true
	}
}
const settingArr = (arr)=>{
	let list = []
	arr.forEach(item=>{
		if(!item.url){
			list.push({url:item,type:'img'})
		}else{
			if(item.cover){
				list.push({url:item.url,cover:item.cover,type:'video',show:false})
			}else{
				list.push({url:item.url,cover:item.cover,type:'video',show:true})
			}
		}
	})
	return list
}
// 获取工作室信息
const identity = ref<number>(0)
const getStudioInfo = async () => {
  const res = await api({
    method: 'get',
    url: `/mall/studio/myStudio`
  })
  if(res){
	  identity.value = res.data.identity
	  // identity:'',// 0陪宠师   1店长 2店员
  }
}
//跳转详情
const btn = (id:string | number,petsitterNickName:string)=>{
	console.log(petsitterNickName)
	uni.navigateTo({
		url:`/pages/studio/dailyServiceDetail/index?id=${id}&petsitterNickName=${petsitterNickName}`
	})
}
//上传日常
const submit = () =>{
	if(!userInfo.value){
		uni.showToast({
			icon: 'none',
			title: '登录后即可咨询'
		});
	}else{
		uni.navigateTo({
			url:`/pages/petsOrder/uploadRoutine/index?studioId=${studioId.value}&userId=${userId.value}`
		})
	}
	
}
const scroll = () =>{
	list.value.forEach(item=>{
		if(item.imgArr){
			item.imgArr.forEach(i=>{
				i.show = false
			})
		}
	})
}
const refresherTriggered = ref<boolean>(false)
//下拉刷新
const refresherrefresh = () =>{
	refresherTriggered.value = true
	page.value = 1
	getDetails()
	setTimeout(()=>{
		refresherTriggered.value = false
	},2000)
}
//滚动到底事件
const lower = () =>{
	if(!flay.value) return
	page.value++
	getDetails()
}
onPageScroll(()=>{
	scroll()
})
interface listType {
	id:number
	title:string
	coverPic:any
	createTime:string
	petsitterNickName:string
	openFlag:number
	content:string
	ifAnonymous:string
	userAvatar:string
	goodsName:string
	userNickName:string
	videos:string
	imgArr:any
}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	line-height: 1;
	
	overflow-y: scroll;
	background-color: #F9F6F6;
	.list{
		padding:24rpx 24rpx 60rpx;
		box-sizing: border-box;
		@include flex(center,space-between);
		flex-wrap: wrap;
	}
	.item{
		width: 100%;
		padding: 40rpx 32rpx;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		.user{
			width: 100%;
			margin-bottom: 40rpx;
			@include flex(center,space-between);
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;
				border-radius: 50%;
			}
			>view.details{
				width: calc(100% - 160rpx);
				@include flex(center);
				.name{
					width: calc(100% - 64rpx - 16rpx);
					color: #1B2120;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			.time{
				color: #7C807F;
				font-size: 26rpx;
			}
		}
		.project{
			color: #7C807F;
			font-size: 24rpx;
			margin-bottom: 24rpx;
			@include flex(center,space-between);
			.privacy{
				color: #6363FF;
			}
		}
		.content{
			width: 100%;
			color: #1B2120;
			font-size: 28rpx;
			line-height: 38rpx;
		}
		.img_list{
			width: 100%;
			@include flex(center);
			margin-top: 24rpx;
			.img_list_item>image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 4rpx;
				margin-right: 8rpx;
			}
			.video{
				position: relative;
				margin-right: 8rpx;
				image,video{
					width: 150rpx;
					height: 150rpx;
					border-radius: 4rpx;
					position: relative;
				}
				.bo{
					width: 30rpx;
					height: 30rpx;
					left: 60rpx;top:60rpx;
					position: absolute;
					border-radius: 0;
				}
			}
		}
	}
}
.submit{
	position: fixed;
	width: 136rpx;
	height: 180rpx;
	right: 0;
	top: 692rpx;
	z-index: 999;
}
</style>
